import React from 'react'
import { Link, NavLink } from 'react-router-dom/cjs/react-router-dom.min'

export default function Menu() {
  /**
   * 在使用react router时，一定不要用a标签去创建超链接
   * 因为a标签的超链接，它会自动向服务器发送请求重新加载页面
   * 用Link、NavLink标签代替
   * NavLink可以指定链接激活后的样式 activeClassName、activeStyle
   */
  return (
    <div>
      <ul>
        <li>
          {/* <Link to="/">主页</Link> */}
          <NavLink exact to="/">主页</NavLink>
        </li>
        <li>
          <Link to="/about">关于</Link>
        </li>
        <li>
          <Link to="/student">学生</Link>
        </li>
        <li>
          <Link to="/myform">表单</Link>
        </li>
      </ul>
    </div>
  )
}
